<template>
  <div id="plan-bill">
    <div class="search-box">
        <el-form>
             <el-form-item label="计划ID：">
               <el-input placeholder="请输入计划ID" v-model="searchForm.planCode" size="small" clearable></el-input>
             </el-form-item>
            <el-form-item>
                <el-button class="search-btn" icon="el-icon-ali-search" @click="searchData">查&nbsp;询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="shop_name" label="店铺类型/店铺名称"></el-table-column>
        <el-table-column prop="total_task_count" label="总单数"></el-table-column>
        <el-table-column prop="total_complete_task_count" label="执行完成单数"></el-table-column>
        <el-table-column prop="platform_type" label="起始冻结本金/佣金">
          <div slot-scope="scope">
           <div>{{scope.row.total_freeze_balance}}/{{scope.row.total_freeze_commission}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="platform_type" label="实际支出本金/佣金">
          <div slot-scope="scope">
           <div>{{scope.row.total_outcome_balance}}/{{scope.row.total_outcome_commission}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="platform_type" label="差额本金/佣金">
          <div slot-scope="scope">
           <div>{{scope.row.balance_difference}}/{{scope.row.commission_difference}}</div>
          </div>
        </el-table-column>
        <el-table-column prop="difference_remark" label="差额处理方式"></el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
  import {
    apiGetMerchantShopList,
    apiReconciliation
  } from '../../request/api.js'
  import { mapGetters,mapActions } from 'vuex';
  export default{
    data(){
      return {
        searchForm:{
          token: '',
          page: 1,
          pageSize: 10,
          planCode: '',
          shopType: ''
        },
        searchTime: [],
        shopNameList: [],
        shopNameOptions: [],
        platformNameObject:{
          1: '淘宝',
          2: '天猫',
          3: '京东',
		  4: '1688',
          13: '唯品会',
          15: '拼多多'
        },
        entranceType: {
          1: '关键词',
          2: '淘口令',
          3: '二维码',
          4: '直播',
          5: '其他'
        },
        pageToatal: 0,
        tableData: [],
        pickerOptions: {
          disabledDate(time) {
             let merchantTime = window.localStorage.getItem('merchantTime')
             let curDate = (new Date()).getTime();
             let three = merchantTime * 24 * 3600 * 1000;
             let threeMonths = curDate - three;
             return time.getTime() < threeMonths;
          },
        },
        userToken: window.localStorage.getItem('token')
      }
    },
    created() {
      this.searchForm.token = this.userToken
      this.searchForm.shopType = this.platformType
      this.getShopList()
      this.getTableData()
    },
    computed:{
      ...mapGetters(['platformType']),
    },
    watch: {
      platformType: function (val) {
        this.searchForm.shopType = val
        this.getTableData()
      }
    },
    methods:{
       ...mapActions(['setShopNameList']),
       dataFilter(val) {
         this.searchForm.shopId = val;
         if (val) { //val存在
           this.shopNameList = this.shopNameOptions.filter((item) => {
             if (!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {
               return true
             }
           })
         } else { //val为空时，还原数组
           this.shopNameList = this.shopNameOptions;
         }
       },
       getShopList() {
         this.$isClick(true);
         apiGetMerchantShopList({
           token: this.userToken
         }).then(res =>{
           this.$isClick(false);
            if (res.code == 1){
             for (var i in res.msg.merchant_shop_list) {
               this.shopNameOptions.push({
                 name: this.platformNameObject[res.msg.merchant_shop_list[i].type] + '-' + res.msg.merchant_shop_list[i].name,
                 id: res.msg.merchant_shop_list[i].id
               })
             }
              this.shopNameList = this.shopNameOptions
            } else {
              this.$message.error(res.msg);
            }
         }).catch(res => {
           this.$isClick(false);
             this.$message.error(res.msg)
         })
       },
       getTableData(){
         this.tableData = []
         this.$isClick(true);
          apiReconciliation(this.searchForm).then(res =>{
            this.$isClick(false);
             if (res.code == 1){
              this.tableData.push(res.msg)
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              this.$message.error(res.msg)
          })
       },
       searchData(){
         this.searchForm.page = 1
         this.searchForm.pageSize = 10
         this.getTableData()
       }
    }
  }
</script>

<style lang="less">
</style>
